//获取三个盒子
//小盒子
const small = document.querySelector('.small')
//中
const middle = document.querySelector('.middle')
//大 
const large = document.querySelector('.large')
//事件委托
small.addEventListener('mouseover',function(e){
	if(e.target.tagName ==='IMG')
	{
		this.querySelector('.active').classList.remove('active')
		e.target.parentNode.classList.add('active')
		//拿到当前小图的src
		//更换中图的 照片
		middle.querySelector('img').src = e.target.src
		// 大盒子更换背景图片
	    large.style.backgroundImage = `url(${e.target.src})`
	}
})

//鼠标经过中等图片，显示右侧大盒子
middle.addEventListener('mouseenter',show)
middle.addEventListener('mouseleave',hide)
let timeId = null
function show(){
	clearTimeout(timeId)
	large.style.display = 'block'
}
function hide(){
	timeId = setTimeout(function(){
		large.style.display = 'none'
	},350)
}
// large.addEventListener('mouseenter',show)
// large.addEventListener('mouseleave',hide)

//鼠标经过中等盒子，显示放大镜
const layer = document.querySelector('.layer')
middle.addEventListener('mouseenter',function(){
	layer.style.display = 'block'
})
middle.addEventListener('mouseleave',function(){
	layer.style.display = 'none'
})

//移动放大镜
middle.addEventListener('mousemove',function(e){
	//获取鼠标在 中等盒子内的坐标，
	let x = e.pageX - middle.getBoundingClientRect().left
	//页面滚动，e.pagy不会变，但XX 会变
	let y = e.pageY - middle.getBoundingClientRect().top -document.documentElement.scrollTop
 // 黑色遮罩移动 在 middle 盒子内 限定移动的距离
	  if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
		// 声明2个变量 黑色盒子移动的 mx my变量 
		let mx = 0, my = 0
		if (x < 100) mx = 0
		if (x >= 100 && x <= 300) mx = x - 100
		if (x > 300) mx = 200

		if (y < 100) my = 0
		if (y >= 100 && y <= 300) my = y - 100
		if (y > 300) my = 200

		layer.style.left = mx + 'px'
		layer.style.top = my + 'px'
		// 大盒子的背景图片要跟随 中等盒子移动  存在的关系是 2倍   
		large.style.backgroundPositionX = -2 * mx + 'px'
		large.style.backgroundPositionY = -2 * my + 'px'
	  }
})

//产品购物车操作
const total = document.querySelector('.total')
const reduce = document.querySelector('.item .reduce')
const add = document.querySelector('.item .add')
add.addEventListener('click',function(){
	total.value++;
})

	reduce .addEventListener('click',function(){
		total.value--
		if(total.value<=1)
			total.value = 1
	})